<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style type="text/css">
        .header {
            font: 20px;
            color: wheat;
            background-color: gray;
            text-align: center;
        }

        .main {
            font: 20px;
            color: wheat;
            width: 150px;
            background-color: blanchedalmond;
        }

        .main-content {
            font: 12px;
            color: black;
            width: 800px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 要被 vue 实例所控制的区域 -->
    <div id="app">
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>

    <script>
        //定义 App 根组件
        const App = {
            template: `<div>
                <!-- 头部区域 -->
                <header class="header">后台管理系统</header>
                <!-- 中间主体区域 -->
                <div class="main">
                    <!-- 左侧菜单栏 -->
                    <div class="content left">
                        <ul>
                            <li>用户管理</li>
                            <li>权限管理</li>
                            <li>商品管理</li>
                            <li>订单管理</li>
                            <li>系统管理</li>
                        </ul>
                    </div>
                    <!-- 右侧内容区域 -->
                    <div class="content right">
                        <div class="main-content">
                            添加用户表单
                        </div>
                    </div>
                    <!-- 尾部区域 -->
                    <footer class="footer">版权信息</footer>
                </div>
            </div>`
        }

        //创建路由对象
        const router = new VueRouter({
            routes: [
                { path: '/', component: App }
            ]
        })
        const vm = new Vue({
            el: '#app',
            router
        })
    </script>
</body>

</html>